<template>
  <div>
    <van-nav-bar
      title="最近阅读"
      left-text="返回"
      right-text="清空"
      left-arrow
      @click-left="clickToBack"
      @click-right="clickToClear"
    >
    </van-nav-bar>
    <div class="history-list" v-if="historyList.length > 0">
      <van-swipe-cell v-for="item in historyList" :key="item.book_id">
        <history-card
          :book_id="item.book_id"
          :image="item.image"
          :name="item.name"
          :writer="item.writer"
          :chapter_name="item.chapter_name"
          :chapter_id="item.chapter_id"
          :read_time="item.read_time"
        ></history-card>
        <template #right>
          <van-button square text="删除" type="danger" class="delete-button" />
        </template>
      </van-swipe-cell>
    </div>
    <van-empty v-else description="暂无阅读记录" />
  </div>
</template>
<script lang="ts" setup>
import { ref, Ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { HistoryItem } from '@/common/types'
import HistoryCard from '@/components/HistoryCard/HistoryCard.vue'
import { useStore } from '@/store/index'

const router = useRouter()
const clickToBack = () => {
  router.back()
}
const store = useStore()
const historyList: Ref<HistoryItem[]> = computed(() => {
  return store.state.historyReadModule.historyReadList
})
const clickToClear = () => {
  store.dispatch('historyReadModule/clearHistoryList')
}
</script>
<style lang="scss" scoped>
.history-list {
  margin: 10px 0;
  padding: 0 10px;
  .delete-button {
    height: 100%;
  }
}
</style>
